import React, { useEffect, useState } from 'react';
import { Button, message, Space, Table, Tag } from 'antd';
import type { TableProps } from 'antd';
import request from '../../api';
import './index.less';
import { formatDate } from '../../utils/moment';

interface DataType {
  key: string;
  ranking?: string;
  username?: string;
  exec_mae?: string;
  upload_time?: string;
}

const columns: TableProps<DataType>['columns'] = [
  {
    title: '排名',
    dataIndex: 'rank',
    align: 'center',
    key: 'rank',
  },
  {
    title: '姓名',
    dataIndex: 'username',
    align: 'center',
    key: 'username',
  },
  {
    title: '类型',
    dataIndex: "user_type",
    align: 'center',
    key: 'user_type',
    render: (text) => text == 1 ? '研究生' : text == 2 ? '管理员' : '本科生'
  },
  {
    title: 'TWMAE',
    dataIndex: 'wmae',
    align: 'center',
    key: 'wmae',
    render: (text)=> parseFloat(text).toFixed(4)
  },
  {
    title: 'MAE',
    dataIndex: 'exec_mae',
    align: 'center',
    key: 'exec_mae',
    render: (text) => parseFloat(text).toFixed(4)
  },
  {
    title: '运行时长(s)',
    dataIndex: 'running_time',
    align: 'center',
    key: 'running_time',
  },
  {
    title: '提交时间',
    dataIndex: 'upload_time',
    align: 'center',
    key: 'upload_time',
    render: (text) => formatDate(text)
  },
];

const RankingList = () => {
  const [data, setData] = useState<DataType[]>([]);
  const [myData, setMyData] = useState<DataType[]>([]);
  const [timeNow, setTimeNow] = useState<any>('')
  const [rank,setRank] = useState(null)

  const columnsMy: TableProps<DataType>['columns'] = [
    {
      title: '排名',
      dataIndex: 'rank',
      align: 'center',
      key: 'rank',
      render: (text)=> rank === null ? "/" : `${text}`
    },
    {
      title: '姓名',
      dataIndex: 'username',
      align: 'center',
      key: 'username',
      render: (text)=> rank === null ? "/" : `${text}`
    },
    {
      title: '类型',
      dataIndex: "user_type",
      align: 'center',
      key: 'user_type',
      render: (text) => text == 1 ? '研究生' : text == 2 ? '管理员' : '本科生'
    },
    {
      title: 'TWMAE',
      dataIndex: 'wmae',
      align: 'center',
      key: 'wmae',
      render: (text)=> rank === null ? "/" :  parseFloat(text).toFixed(4)
    },
    {
      title: 'MAE',
      dataIndex: 'exec_mae',
      align: 'center',
      key: 'exec_mae',
      render: (text)=> rank === null ? "/" :  parseFloat(text).toFixed(4)
    },
    {
      title: '运行时长(s)',
      dataIndex: 'running_time',
      align: 'center',
      key: 'running_time',
    },
    {
      title: '提交时间',
      dataIndex: 'upload_time',
      align: 'center',
      key: 'upload_time',
      render: (text)=> rank === null ? "/" : formatDate(text)
    },
  ];

  useEffect(()=>{
    getRankingList()
  },[])

  const getRankingList = () => {
    request.getRankingList().then(res => {
      setRank(res.data.data.user_rank.rank)
        if (res.status == 200) {
          const top10Data = res.data.data.top_10.map((item, index) => {
            return {
              ...item,
              rank: (index + 1).toString(), // 设置ranking属性为索引加1
              key: (index + 1).toString(),
            };
          });
          setData(top10Data);
          const user_rank = res.data.data.user_rank.exec_record
          if(user_rank != ''){
              user_rank.rank = res.data.data.user_rank.rank
          }
          setMyData([user_rank])
          message.success(res.data.msg)

          const formattedDate = new Date().toLocaleString("zh-CN", {hour12: false});
          setTimeNow(formattedDate)
        }
    })
  }

  return(
    <div style={{padding:10}}>
      <div style={{display:'flex',justifyContent:'flex-end',marginBottom:10}}>
        <Button type="primary" onClick={getRankingList}>刷新</Button>
      </div>
      <Table columns={columns} dataSource={data} bordered size='small' />
      <div className="title">我的成绩</div>
      <Table columns={columnsMy} dataSource={myData} bordered size='small' />
      <div style={{display:'flex',justifyContent:'space-between',marginTop:20}}>
        <div>
          备注：排行榜仅为参考，不作为最终评分结果，最终评分以比赛结束后，统一运行结果为准
        </div>
        <div style={{color:"grey"}}>
          最新更新时间：{timeNow}
        </div>
      </div>
    
    </div>
  )
};

export default RankingList;